// 高德地图组件
import React, {useEffect} from 'react'
import AMapLoader from '@amap/amap-jsapi-loader'
import {amapKey} from '../utils/tools'

const Amap = (props) => {
    const {width, height, position, setPosition} = props
    let map = null
    useEffect(() => {
        AMapLoader.load({
            key: amapKey, // 申请好的Web端开发者Key，首次调用 load 时必填
            version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins: ['AMap.Geocoder'] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        })
            .then((AMap) => {
                map = new AMap.Map('container', {
                    // 设置地图容器id
                    viewMode: '3D', // 是否为3D地图模式
                    zoom: 13, // 初始化地图级别
                    center: [position.longitude, position.latitude] // 初始化地图中心点位置
                })
                map.on('click', (e) => {
                    const {lng, lat} = e.lnglat // 获取点击处的地理坐标
                    setPosition({
                        longitude: lng,
                        latitude: lat
                    })
                    console.log('点击坐标：', lng, lat)
                    // 逆向地理编码
                    // const geocoder = new AMap.Geocoder()
                    // geocoder.getAddress({ lng, lat }, (status, result) => {
                    //   console.log(status, result)
                    //   if (status === 'complete' && result.info === 'OK') {
                    //     const address = result.regeocode.formattedAddress
                    //     console.log('地址：', address)
                    //   }
                    // })

                    // 清除之前标记
                    map.clearMap()
                    // 点标记
                    let marker = new AMap.Marker({
                        position: new AMap.LngLat(+lng, +lat)
                    })
                    // 将创建的点标记添加到已有的地图实例
                    map.add(marker)
                })
            })
            .catch((e) => {
                console.log(e)
            })
    }, [])
    return (
        <div id="container" style={{width: width + 'px', height: height + 'px'}}>
            高德地图组件加载失败
        </div>
    )
}

export default Amap
